<template>
  <Menu ref="menus" className="h-menu-white" :datas="data" :inlineCollapsed="siderCollapsed" @select="menuSelect"></Menu>
</template>

<script>
export default {
  computed: {
    siderCollapsed() {
      return this.$store.state.menus.siderCollapsed;
    },
    current() {
      return this.$store.state.menus.current;
    },
    data() {
      return this.$store.state.menus.data;
    },
  },
  mounted() {
    if (this.$store.state.LOGIN_FLAG && !!this.data && this.data.length == 0) {
      this.$axios.post("/sysmenus/home").then((res) => {
        console.log(res.data.data)
        this.initSearch(res.data.data);
        this.$store.commit("searchData", this.searchData);
        this.$store.commit("menuData", res.data.data);
      });
    }
  },
  updated() {
    this.$refs.menus.select(this.current);
  },
  data() {
    return {
      searchData: [],
    };
  },
  watch: {
    $route() {
      let path = $nuxt.$route.path;
      if (this.$store.state.menus.current == path) {
        this.$refs.menus.select(path);
      }
    },
  },
  methods: {
    menuSelect(data) {
      this.$store.commit("current", data.key);
      this.$store.commit("title", data.title);
      this.$router.push(data.key);
      this.$store.commit("menuCache", { url: data.key, title: data.title });
    },
    initSearch(data) {
      data.forEach((item) => {
        if (item.children.length > 0) {
          this.searchData.push({ label: item.title, isLabel: true });
          this.initSearch(item.children);
        } else {
          this.searchData.push({ value: item.key, label: item.title });
        }
      });
    },
  },
};
</script>